<template>
  <div>
    <van-tabs v-model='activeName' @click='onClick' sticky>
      <template v-for='nav in navList'>
        <van-tab :title='nav.text' :name='nav.status'>
          <template v-if='orderList.length>0'>
            <div class='order' v-for='(item, index) in orderList' :key='index'>
              <template v-for='cartItem in item.cartInfo'>
                <van-cell :title='item.createTime' :border='false' :value='nav.text'
                          v-if='cartItem.isReply==0' />
                <van-cell :title='item.createTime' :border='false' value=' ' v-else />
                <van-card style="background-color: #FFFFFF;" :num='cartItem.cartNum'
                          :price='item.payPrice ' :desc='cartItem.productInfo.storeInfo'
                          :title='cartItem.productInfo.storeName' :thumb='imgUrls+cartItem.productInfo.image'>
                  <template #price>
										<span v-if='cartItem.productInfo.isIntegral==1'>
											<font size='4' color='#ED6A0C'>{{ cartItem.productInfo.attrInfo.integral }}
											</font>
											<font size='3' color='#ED6A0C'>积分</font>
										</span>
                    <span v-else>
											<font size='3' color='#ED6A0C' v-if='item.combinationId==0'>￥</font>
											<font size='3' color='#ED6A0C' v-if='item.combinationId!=0'>团购价￥</font>
											<font size='4' color='#ED6A0C'>{{ cartItem.truePrice }}</font>
										</span>
                  </template>
                  <template #tags>
                    <van-tag plain type='danger'>{{ cartItem.productInfo.attrInfo.sku }}</van-tag>
                  </template>
                  <template #footer>
                    <van-button v-if='item.statusDto.type==0' class='btn'
                                @click='payInfo=item;show=true'>立即付款
                    </van-button>
                    <van-button v-if='item.statusDto.type==0' class='btn'
                                @click='cancelOrder(item.orderId)'>取消订单
                    </van-button>
                    <van-button v-if='item.combinationId!=0' class='btn'
                                :to="'/groupBookOk?groupId='+item.pinkId">查看团购
                    </van-button>
                    <van-button v-if='item.statusDto.type==1' class='btn'
                                @click="$toast.success('已提醒卖家发货！')">提醒发货
                    </van-button>
                    <van-button v-if='item.statusDto.type==2' class='btn'
                                @click='takeOrder(item.orderId)'>确认收货
                    </van-button>
                    <van-button v-if='item.statusDto.type==3' class='btn'
                                :to="'/orderReview' + '?unique=' +cartItem.unique">去评价
                    </van-button>
                    <van-button class='btn' :to="'/order?key='+item.unique">立即查看</van-button>
                    <van-button v-if='item.statusDto.type==4' class='btn'
                                @click='delOrder(item.orderId)'>删除订单
                    </van-button>
                  </template>
                </van-card>
                <van-divider :style="{width: 'calc(100% - 50px)',margin:'0 auto' }" />
              </template>
            </div>
            <van-divider v-if='orderList.length>9' @click='move(nav.status)'>点击加载更多</van-divider>
          </template>
          <template v-else>
            <van-empty description='空空如也!' />
          </template>
        </van-tab>
      </template>
    </van-tabs>
    <van-popup v-model='show' round position='bottom' :style="{ height: '30%' }">
      <van-radio-group v-model='radio' v-if='payInfo.payIntegral==0'>
        <van-cell center icon='shop-o'>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #title>
            <span class='custom-title'>余额</span>
          </template>
          <template #label>
            <span class='custom-title'>￥{{ userAccount.nowMoney }}</span>
          </template>
          <template #right-icon>
            <van-radio name='1'></van-radio>
          </template>
        </van-cell>
        <van-cell center icon='shop-o'>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #title>
            <span class='custom-title'>微信</span>
          </template>
          <template #label>
            <span class='custom-title'>暂未开通</span>
          </template>
          <template #right-icon>
            <van-radio name='1' disabled></van-radio>
          </template>
        </van-cell>
      </van-radio-group>
      <van-radio-group v-model='radio' v-else>
        <van-cell center icon='shop-o'>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #title>
            <span class='custom-title'>积分支付</span>
          </template>
          <template #right-icon>
            <van-radio name='1'></van-radio>
          </template>
        </van-cell>
      </van-radio-group>
      <van-button block type='danger' class='btns' @click='pay()'>确定</van-button>
    </van-popup>

  </div>
</template>

<script>
import {
  getOrderList,
  cancelOrder,
  payOrder,
  takeOrder,
  delOrder
} from '@/api/order.js'
import {
  getBalance
} from '@/api/wallet.js'

export default {
  data() {
    return {
      userAccount: {},
      imgUrls: this.$baseApi,
      radio: '1',
      status: 0,
      show: false,
      navList: [{
        status: 0,
        text: '待付款'
      },
        {
          status: 1,
          text: '待发货'
        },
        {
          status: 2,
          text: '待收货'
        },
        {
          status: 3,
          text: '待评价'
        },
        {
          status: 4,
          text: '已完成'
        }
      ],
      activeName: this.$route.query.type * 1,
      limit: 0,
      orderList: [],
      payInfo: {}
    }
  },
  created() {
    this.getList(this.$route.query.type)
    this.getBalance()
  },
  methods: {
    //收货
    takeOrder(id) {
      takeOrder({
        uni: id
      }).then(res => {
        if (res.status == 200) {
          this.$toast.success('收货成功')
          this.activeName = 3
          this.getList(this.activeName)
        }
      })
    },
    //我的钱包数据
    getBalance() {
      getBalance().then(res => {
        this.userAccount = res.data
      })
    },
    pay() {
      payOrder({
        uni: this.payInfo.orderId,
        from: 'h5',
        paytype: this.payInfo.payIntegral == 0 ? 'yue' : 'integral'
      }).then(res => {
        if (res.status == 200) {
          this.$toast.success('支付成功')
          this.getList(this.$route.query.type)
          this.show = false
        }
      })

    },
    //取消订单
    cancelOrder(id) {
      cancelOrder({
        id: id
      }).then(res => {
        if (res.status == 200) {
          this.$toast.success('取消成功')
          this.getList(this.$route.query.type)
        }
      })
    },
    delOrder(id) {
      delOrder({
        uni: id
      }).then(res => {
        if (res.status == 200) {
          this.$toast.success('删除成功')
          this.getList(this.$route.query.type)
        }
      })
    },

    //name为van-tab的name
    onClick(name, title) {
      this.getList(name)
    },
    getList(name, limit) {
      getOrderList({
        type: name,
        limit: limit
      }).then(res => {
        this.orderList = res.data.content
      })
    },
    move(type) {
      if (this.status == type) {
        this.limit += 10
      } else {
        this.limit = 0
        this.limit += 10
      }
      this.status = type
      this.limit += 10
      this.getList(type, this.limit)
    }
  }
}
</script>

<style scoped>
.order {
  margin-top: 10px;
  background-color: #FFFFFF;
}

.order .btn {
  height: 30px;
  border-radius: 7px;
}

.btns {
  width: calc(100% - 30px);
  margin: 10px auto;
}
</style>
